<template>
  <div class="footer">
    <div>
      <div class="top">
        <span></span>
        <span></span>
      </div>
      <div class="body">
        <div class="left">
          <div>
            <span>抵制不良游戏</span>
            <span>拒绝盗版游戏</span>
            <span>注意自我保护</span>
            <span>谨防上当受骗</span>
            <span>适当游戏益脑</span>
            <span>沉迷游戏伤身</span>
            <span>合理安排时间</span>
            <span>享受健康生活</span>
          </div>
          <p>
            《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。
          </p>
        </div>
        <div class="right">
          <p>
            腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作
          </p>
          <p>
            COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS
            RESERVED.&nbsp;&nbsp;&nbsp;&nbsp; 腾讯公司版权所有
            &nbsp;网络游戏行业防沉迷自律公约
          </p>
          <p>
            <img
              src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png"
              alt=""
            />
            工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号
          </p>
          <p>
            <img
              src="	https://game.gtimg.cn/images/js/2018foot/logo/icplogo.png"
              alt=""
            />
            文网游备字[2016]M-CSG 0059 号|新广出审[2017] 6712号|ISBN
            978-7-7979-8408-9
          </p>
          <p>全国文化市场统一举报电话：12318</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.footer {
  background-image: url(https://game.gtimg.cn/images/yxzj/web201605/top_banner/bg_footer.jpg);
  height: 362px;
  // border: 1px solid red;
  padding-top: 80px;
  margin-top: 30px;
  > div {
    margin: 0 auto;
    width: 1200px;
    .top {
      border-bottom: 2px solid rgb(212, 212, 212);
      span {
        display: inline-block;
        background-image: url("/public/img/spr.png");
        &:first-child {
          width: 285px;
          height: 64px;
        }
        &:last-child {
          width: 70px;
          height: 64px;
          background-position: -285px 0;
        }
      }
    }
    .body {
      color: gray;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .left {
        width: 508px;
        height: 86px;
        // border: 1px solid blue;
        padding-top: 20px;
        > div {
          margin-bottom: 10px;
          span {
            margin-right: 12px;
          }
        }
      }
      .right {
        width: 650px;
        // height: 110px;
        // border: 1px solid red;
        padding-top: 20px;
        p {
          &:first-child {
            margin-bottom: 10px;
          }
          &:nth-child(3) {
            margin: 4px 0;
            img {
              vertical-align: middle;
              margin-top: -4px;
            }
          }
          &:nth-child(4) {
            margin-bottom: 30px;
            img {
              vertical-align: middle;
              margin-top: -4px;
            }
          }
        }
      }
    }
  }
}
</style>